<!--图层-编辑-->
<template>
  <g v-if="Store.selectKeys.length > 0" :style="{ transform: 'scale(' + canvasScale + ')' }">
    <!-- 控制图标 -->
    <g v-for="item in ctrlIconDataSet">
      <!-- 矩形-控制框 -->
      <rect v-if="item.icon === 'moveFrame'" :width="Math.abs(item.pelInfo.place.tr.x - item.pelInfo.place.tl.x) + 'px'"
        :height="Math.abs(item.pelInfo.place.bl.y - item.pelInfo.place.tl.y) + 'px'" :x="item.coordinate.x"
        :y="item.coordinate.y" stroke="rgb(200, 200, 10)" fill="rgba(0, 255, 255, 0.5)" stroke-width="1"
        stroke-dasharray="1" opacity="0.3" :cursor="item.cursor" @mouseenter="onPelEditMouseEvent($event, item)"
        @mousedown="onPelEditMouseDown($event, item)" @mousemove="onPelEditMouseMove($event, item)"
        @mouseup="onPelEditMouseUp($event, item)" @mouseout="onPelEditMouseOut($event, item)" />
      <!-- 矩形-控制图标 -->
      <rect v-if="item.icon === 'Rect'" :width="cursorBoxSize + 'px'" :height="cursorBoxSize + 'px'"
        :x="item.coordinate.x - cursorBoxSize / 2" :y="item.coordinate.y - cursorBoxSize / 2" stroke="rgb(200, 200, 10)"
        fill="rgba(0, 255, 255, 0.5)" stroke-width="1" stroke-dasharray="1" :cursor="item.cursor"
        @mouseenter="onPelEditMouseEvent($event, item)" @mousedown="onPelEditMouseDown($event, item)"
        @mousemove="onPelEditMouseMove($event, item)" @mouseup="onPelEditMouseUp($event, item)"
        @mouseout="onPelEditMouseOut($event, item)" />
      <!-- 圆形-控制图标 -->
      <circle v-if="item.icon === 'circle'" :cx="item.coordinate.x" :cy="item.coordinate.y" :r="cursorBoxSize / 2"
        stroke="rgb(200, 200, 10)" fill="rgba(0, 255, 255, 0.5)" stroke-width="1" stroke-dasharray="1"
        :cursor="item.cursor" @mouseenter="onPelEditMouseEvent($event, item)"
        @mousedown="onPelEditMouseDown($event, item)" @mousemove="onPelEditMouseMove($event, item)"
        @mouseup="onPelEditMouseUp($event, item)" @mouseout="onPelEditMouseOut($event, item)" />
    </g>
  </g>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import { ref, reactive, onMounted, toRefs, watch, onUnmounted, computed } from "vue";
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { onCalcMoveCursor } from "@/functions";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端定义引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { CoordinateType } from "@/defines";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { useCanvasStore } from "@/store/canvasStore"; // 画布

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const canvasStore = useCanvasStore(); // 画布

/* ================================================================================================ */
//                                变量
/* ================================================================================================ */
let Store = reactive({
  /** 选择的图元键*/
  selectKeys: computed(() => canvasStore.selectKeys),
  /** 控制图标数据*/
  ctrlIconDataSet: computed(() => canvasStore.ctrlIconDataSet),
  // /** 图元数据*/
  // pels: computed(() => workStore.pels),
});

let ctrlIconDataSet = computed(() => canvasStore.ctrlIconDataSet);
/** 画布缩放 */
let canvasScale = computed(() => canvasStore.canvasAttr.canvasScale);
/** 光标盒尺寸 */
let cursorBoxSize = computed(() => canvasStore.canvasAttr.cursorBoxSize);
const MyMouseDown = ref(false);
/** 画布宽度 */
let canvasWidth = Number(canvasStore.canvasAttr.canvasWidth);
/** 画布高度 */
let canvasHeight = Number(canvasStore.canvasAttr.canvasHeight);
/* ================================================================================================ */
//                                ★ 函数
/* ================================================================================================ */

/** 图元编辑-鼠标进入事件 */
const onPelEditMouseEvent = (e: MouseEvent, Item: any) => {
 // console.log("图元编辑-鼠标进入事件")
 // console.log(Item)
  canvasStore.workState = 30; // 设置工作状态- 编辑
};

/** 图元编辑-鼠标按下事件 */
const onPelEditMouseDown = (e: MouseEvent, Item: any) => {
 // console.log("图元编辑-鼠标按下事件")
  MyMouseDown.value = true;
 // console.log(Item)
};

/** 图元编辑-鼠标抬起事件 */
const onPelEditMouseUp = (e: MouseEvent, Item: any) => {
 // console.log("图元编辑-鼠标抬起事件")
 // console.log(Item)
  canvasStore.workState = 0; // 设置工作状态- 编辑
  MyMouseDown.value = false;
  canvasStore.ctrlIconDataSet = []; //清理-控制图标数据
};

/** 图元编辑-鼠标移出事件 */
const onPelEditMouseOut = (e: MouseEvent, Item: any) => {
 // console.log("图元编辑-鼠标移出事件")
 // console.log(Item)
  canvasStore.workState = 0; // 设置工作状态- 无
  MyMouseDown.value = false;
};

/** 图元编辑-鼠标移动事件 */
const onPelEditMouseMove = (e: MouseEvent, Item: any) => {
 // console.log("图元编辑-鼠标移动事件")
 // console.log(Item)
  if (canvasStore.workState === 30 && MyMouseDown.value === true) {
   // console.log(e)
    /**◆ 计算光标点 */
    onCalcMoveCursor(e.offsetX, e.offsetY);
    /**◆ 移动坐标 */
    let moveCoordinate: CoordinateType = JSON.parse(
      JSON.stringify(canvasStore.coordinate)
    );
   // console.log(Item.type)
   // console.log(moveCoordinate)
    let PelType = Item.type;
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 水平线
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    if (PelType === "horizontaLine" /*水平线*/ && Item.label === "start") {
      canvasStore.selectedPel.attrs.x1.val = moveCoordinate.x;
    }
    if (PelType === "horizontaLine" /*水平线*/ && Item.label === "end") {
      canvasStore.selectedPel.attrs.x2.val = moveCoordinate.x;
    }

    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 水平线
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    if (PelType === "verticalLine" /*垂直线*/ && Item.label === "start") {
      canvasStore.selectedPel.attrs.y1.val = moveCoordinate.y;
    }
    if (PelType === "verticalLine" /*垂直线*/ && Item.label === "end") {
      canvasStore.selectedPel.attrs.y2.val = moveCoordinate.y;
    }

    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 斜线
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    if (PelType === "slantLine" /*斜线*/ && Item.label === "start") {
      canvasStore.selectedPel.attrs.x1.val = moveCoordinate.x;
      canvasStore.selectedPel.attrs.y1.val = moveCoordinate.y;
    }
    if (PelType === "slantLine" /*斜线*/ && Item.label === "end") {
      canvasStore.selectedPel.attrs.x2.val = moveCoordinate.x;
      canvasStore.selectedPel.attrs.y2.val = moveCoordinate.y;
    }

    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 圆;圆分多边形; ☩
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    if (
      (PelType === "circle" /*圆*/ ||
        PelType === "ellipse" /*椭圆*/ ||
        PelType === "circlePolygon") /*圆分多边形*/ &&
      Item.label === "moveFrame" /*中心点*/
    ) {
      canvasStore.selectedPel.attrs.cx.val = moveCoordinate.x;
      canvasStore.selectedPel.attrs.cy.val = moveCoordinate.y;
    }

    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 三点弧线  起点
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    if (PelType === "arc" /*三点弧线*/ && Item.label === "start" /*起点*/) {
      canvasStore.selectedPel.attrs.startX.val = moveCoordinate.x;
      canvasStore.selectedPel.attrs.startY.val = moveCoordinate.y;
    }

    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 三点弧线  终点
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    if (PelType === "arc" /*三点弧线*/ && Item.label === "end" /*终点*/) {
      canvasStore.selectedPel.attrs.endX.val = moveCoordinate.x;
      canvasStore.selectedPel.attrs.endY.val = moveCoordinate.y;
    }

    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 三点弧线  控制点
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    if (PelType === "arc" /*三点弧线*/ && Item.label === "ctrl" /*控制点*/) {
      canvasStore.selectedPel.attrs.ctrlX.val = moveCoordinate.x;
      canvasStore.selectedPel.attrs.ctrlY.val = moveCoordinate.y;
    }

    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 矩形;移动☩
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    if ((PelType === "rectangle" /*矩形*/ ||
      PelType === "divText" /*DIV文本*/ ||
      PelType === "svgImage" ||
      PelType === "divBlock" /*DIV块*/) &&
      Item.label === "moveFrame" /*控制点*/) {
      let widthVal = Number(canvasStore.selectedPel.attrs.width.val);   // 宽度
      let heightVal = Number(canvasStore.selectedPel.attrs.height.val); // 高度
      let newX = moveCoordinate.x - widthVal / 2;//新坐标x
      let newY = moveCoordinate.y - heightVal / 2;//新坐标y
      canvasStore.selectedPel.attrs.left.val = newX;
      canvasStore.selectedPel.attrs.top.val = newY;
    }
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 包
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    if (PelType === "wrap" /*包*/  &&
      Item.label === "center" /*控制点*/) {
      let leftVal = Number(canvasStore.selectedPel.attrs.left.val); // 坐标X
      let topVal = Number(canvasStore.selectedPel.attrs.top.val);   // 坐标Y

    }
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 路径
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    if (
      PelType === "polygon" /*多边形*/ ||
      PelType === "polyline" /*折线*/ ||
      PelType === "path" /*路径*/
    ) {
      let Index = Number(Item.label);
      canvasStore.selectedPel.attrs.pathPoints.val[Index].x = moveCoordinate.x;
      canvasStore.selectedPel.attrs.pathPoints.val[Index].y = moveCoordinate.y;
    }

    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    // 🐸 Svg文本
    /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    if (PelType === "svgText" /*Svg文本*/ && Item.label === "middle" /*中心点*/) {
      canvasStore.selectedPel.attrs.textLeft.val = moveCoordinate.x;
      canvasStore.selectedPel.attrs.textTop.val = moveCoordinate.y;
    }
  }
};
</script>

<style lang="scss" scoped>
/* 引入共用css */
@import "@/assets/h.scss";
</style>
